<template>
  <div class="lg-progress">
      <div v-if="type == 'circle'" class="lg-progress__circle" :style="`width:${numerical(width || 100)}px;height:${numerical(width || 100)}px`">
        <canvas :id="id" width="160" height="160" :style="`width:${numerical(width || 100) - (shrink)}px;height:${numerical(width || 100) - (shrink)}px;`"></canvas>
      </div>
      <div v-if="type == 'line'" class="lg-progress__link" :style="`${width ? 'width:' + numerical(width) + 'px' : 'width: 100%'};height:${lineWidth || 15}px`">
          <div class="lg-progress__link__wrapper">
             <div class="lg-progress__link__wrapper--progress" :style="`${'width:' + percentage + '%'};background: ${statusColor()}`">
                <div class="lg-progress__link--text lg-progress__link--textInside" :style="`line-height:${lineWidth || 15}px`" v-if="textInside && !textHidden">{{format || (percentage + '%')}}</div>
             </div>
          </div>
          <div class="lg-progress__link--text" :style="`color:${format ? '#606266' : statusColor()}`" v-if="!textInside && !textHidden">{{format || (percentage + '%')}}</div>
      </div>
  </div>
</template>

<script>
import { numerical, newGuid } from '@/libs/index.js'
export default {
  name: 'lgPorgress',
  props: {
    type: {
      type: String,
      default: 'circle' // 默认 line circle
    },
    percentage: {
      type: Number,
      default: 0
    },
    // type == circle 环形进度条 生效 只支持PX
    width: {
      type: [String, Number],
      default: 0
    },
    lineWidth: {
      type: Number,
      default: 5
    },
    color: {
      type: [String,Array],
      default: ''
    },
    fontSize: {
      type: String,
      default: '18px'
    },
    shrink: { // 指在传的width中缩小指定像素
      type: Number,
      default: 0
    },
    status: {
      type: String,
      default: 'default' // default #20a0ff success #13ce66 warning #e6a23c exception #ff4949
    },
    textInside: {
      type: Boolean,
      default: false
    },
    format:{
      type: String,
      default: ''
    },
    textHidden: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      num: 0,
      canvas: '',
      context: '',
      cirX: '',
      cirY: '',
      rad: '',
      percentageVal: 0,
      speed: 150,
      r: 36,
      id: ''
    }
  },
  watch: {
    percentage: {
      handler (newVal) {
        this.percentageVal = newVal
        if (this.type == 'circle') {
          this.$nextTick(() => {
            this.DreamLoading()
          })
        }
      },
      immediate: true
    },
    status () {
      if (this.type == 'circle') {
        this.$nextTick(() => {
          this.DreamLoading()
        })
      }
    }
  },
  created() {
    if (this.type == 'circle') {
      this.id = newGuid()
    }
  },
  mounted () {
    if (this.type == 'circle') {
      this.canvas = document.getElementById(this.id)
      this.context = this.canvas.getContext('2d')
      this.context.scale(2, 2)
      this.percentageVal = this.percentage
      this.cirX = 40, // this.canvas.width/ 2
      this.cirY = 40, // this.canvas.height/ 2
      this.rad = Math.PI * 2 / 100
    }
  },
  methods: {
    numerical,
    statusColor () {
      let type = typeof this.color
      if (type == 'string' && this.color) {
        return this.color
      } else if (type == 'object' && this.color.length){
        for(let i = 0; i< this.color.length; i++) {
          if (this.percentage <= this.color[i].percentage) {
            console.log(this.color[i].color)
            return this.color[i].color
          }
        }
      }
      if (this.status == 'default') {
        return '#20a0ff'
      } else if (this.status == 'success') {
        return '#13ce66'
      } else if (this.status == 'warning') {
        return '#e6a23c'
      } else if (this.status == 'exception') {
        return '#ff4949'
      }
    },
    // 绘制最外层细圈
    writeCircle () {
      this.context.save() // save和restore可以保证样式属性只运用于该段canvas元素
      this.context.beginPath() // 开始路径
      this.context.strokeStyle = '#e5e9f2' // 设置边线的颜色
      this.context.lineWidth = this.lineWidth > 8 ? 8 : this.lineWidth
      this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, false) // 画一个圆的路径
      this.context.stroke() // 绘制边线
      this.context.closePath()
    },
    // 绘制文本
    writeText (n) {
      let cirX = this.percentage >= 100 ? this.cirX - 24 : this.percentage > 9 ? this.cirX - 18 : this.cirX - 14
      this.context.save()
      this.context.font = `${this.fontSize} Arial`
      this.context.fillStyle = this.statusColor() // 字体颜色
      this.context.fillText(n.toFixed(0) + '%', cirX, this.cirY + 7) // 绘制实心
      this.context.stroke()
      this.context.restore()
    },
    // 绘制蓝色外圈
    writeBlue (n) {
      this.context.save()
      this.context.strokeStyle = this.statusColor()
      this.context.lineWidth = this.lineWidth > 8 ? 8 : this.lineWidth
      this.context.lineCap = 'round'
      this.context.beginPath()
      this.context.arc(this.cirX, this.cirY, this.r, -Math.PI / 2, -Math.PI / 2 + this.rad * n, false)
      this.context.stroke()
      this.context.restore()
    },
    DreamLoading () {
      // 清除所有，重新绘制
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.writeCircle()
      this.writeText(this.percentageVal)
      this.writeBlue(this.percentageVal)
    }
  }
}
</script>
<style lang="less" scoped>
.lg-progress{
  .lg-progress__circle{
    display: flex;
    align-items: center;
    justify-content: center
  }
  .lg-progress__link{
    display: flex;
    align-items: center;
    .lg-progress__link__wrapper{
       flex: 1;
       height: 100%;
       overflow: hidden;
       background: #e5e9f2;
       border-radius: 15px;
       .lg-progress__link__wrapper--progress{
         display: flex;
         align-items: center;
         justify-content: flex-end;
         height: 100%;
         border-radius: 15px;
       }
       .lg-progress__link--textInside{
         color:#fff;
         font-size: 12px;
         margin-right: 5px
       }
    }
    .lg-progress__link--text {
      margin-left: 10px;
      line-height: 1;
    }
  }
}
</style>
